@openproject/primer-view-components 0.80.2 → 0.81.0-rc.0426a0ac2

package/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) {

package/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)}

package/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]",

package/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);

package/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';

package/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';

package/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;
+}

package/app/lib/primer/forms/character_counter.js

@@ -0,0 +1,114 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export class CharacterCounter {
+    constructor(inputElement, characterLimitElement, characterLimitSrElement) {
+        this.inputElement = inputElement;
+        this.characterLimitElement = characterLimitElement;
+        this.characterLimitSrElement = characterLimitSrElement;
+        this.SCREEN_READER_DELAY = 500;
+        this.announceTimeout = null;
+        this.isInitialLoad = true;
+    }
+    /**
+     * Initialize character counting by setting up event listener and initial count
+     */
+    initialize(signal) {
+        this.inputElement.addEventListener('keyup', () => this.updateCharacterCount(), signal ? { signal } : undefined); // Keyup used over input for better screen reader support
+        this.inputElement.addEventListener('paste', () => setTimeout(() => this.updateCharacterCount(), 50), // Gives the pasted content time to register
+        signal ? { signal } : undefined);
+        this.updateCharacterCount();
+        this.isInitialLoad = false;
+    }
+    /**
+     * Clean up any pending timeouts
+     */
+    cleanup() {
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+    }
+    /**
+     * Pluralizes a word based on the count
+     */
+    pluralize(count, string) {
+        return count === 1 ? string : `${string}s`;
+    }
+    /**
+     * Update the character count display and validation state
+     */
+    updateCharacterCount() {
+        if (!this.characterLimitElement)
+            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 = '';
+        if (charactersRemaining >= 0) {
+            const characterText = this.pluralize(charactersRemaining, 'character');
+            message = `${charactersRemaining} ${characterText} remaining`;
+            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`;
+            const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text');
+            if (textSpan) {
+                textSpan.textContent = message;
+            }
+            this.setError();
+        }
+        // We don't want this announced on initial load
+        if (!this.isInitialLoad) {
+            this.announceToScreenReader(message);
+        }
+    }
+    /**
+     * Announce character count to screen readers with debouncing
+     */
+    announceToScreenReader(message) {
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+        this.announceTimeout = window.setTimeout(() => {
+            if (this.characterLimitSrElement) {
+                this.characterLimitSrElement.textContent = message;
+            }
+        }, this.SCREEN_READER_DELAY);
+    }
+    /**
+     * Set error when character limit is exceeded
+     */
+    setError() {
+        this.inputElement.setAttribute('invalid', 'true');
+        this.inputElement.setAttribute('aria-invalid', 'true');
+        this.characterLimitElement.classList.add('fgColor-danger');
+        // Show danger icon
+        const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon');
+        if (icon) {
+            icon.removeAttribute('hidden');
+        }
+    }
+    /**
+     * Clear error when back under character limit
+     */
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.inputElement.removeAttribute('aria-invalid');
+        this.characterLimitElement.classList.remove('fgColor-danger');
+        // Hide danger icon
+        const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon');
+        if (icon) {
+            icon.setAttribute('hidden', '');
+        }
+    }
+}

package/app/lib/primer/forms/primer_text_area.d.ts

@@ -0,0 +1,13 @@
+export declare class PrimerTextAreaElement extends HTMLElement {
+    #private;
+    inputElement: HTMLTextAreaElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        PrimerTextAreaElement: typeof PrimerTextAreaElement;
+    }
+}

package/app/lib/primer/forms/primer_text_area.js

@@ -0,0 +1,53 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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 __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _PrimerTextAreaElement_characterCounter;
+import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
+let PrimerTextAreaElement = class PrimerTextAreaElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextAreaElement_characterCounter.set(this, null);
+    }
+    connectedCallback() {
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextAreaElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f").initialize();
+        }
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f")?.cleanup();
+    }
+};
+_PrimerTextAreaElement_characterCounter = new WeakMap();
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
+PrimerTextAreaElement = __decorate([
+    controller
+], PrimerTextAreaElement);
+export { PrimerTextAreaElement };
+if (!window.customElements.get('primer-text-area')) {
+    Object.assign(window, { PrimerTextAreaElement });
+    window.customElements.define('primer-text-area', PrimerTextAreaElement);
+}

package/app/lib/primer/forms/primer_text_field.d.ts

@@ -15,6 +15,8 @@ export declare class PrimerTextFieldElement extends HTMLElement {
     validationErrorIcon: HTMLElement;
     leadingVisual: HTMLElement;
     leadingSpinner: HTMLElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     clearContents(): void;

package/app/lib/primer/forms/primer_text_field.js

@@ -1,4 +1,3 @@
-/* eslint-disable custom-elements/expose-class-on-global */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -16,13 +15,15 @@ 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 _PrimerTextFieldElement_abortController;
+var _PrimerTextFieldElement_abortController, _PrimerTextFieldElement_characterCounter;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
 let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
+        _PrimerTextFieldElement_characterCounter.set(this, null);
     }
     connectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
@@ -40,9 +41,15 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
             const errorMessage = await event.detail.response.text();
             this.setError(errorMessage);
         }, { signal });
+        // Set up character limit tracking if present
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextFieldElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f").initialize(signal);
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f")?.cleanup();
     }
     clearContents() {
         this.inputElement.value = '';
@@ -92,6 +99,7 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
+_PrimerTextFieldElement_characterCounter = new WeakMap();
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "inputElement", void 0);
@@ -113,6 +121,12 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
     controller
 ], PrimerTextFieldElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.80.2",
+  "version": "0.81.0-rc.0426a0ac2",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -63,12 +63,12 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.24.1",
-    "@github/axe-github": "^0.7.0",
+    "@github/axe-github": "^0.8.1",
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.8.0",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.49.1",
-    "@primer/css": "22.0.2",
+    "@playwright/test": "^1.57.0",
+    "@primer/css": "22.1.0",
     "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -80,7 +80,7 @@
     "glob": "^11.0.2",
     "markdownlint-cli2": "^0.19.1",
     "mocha": "^11.0.1",
-    "playwright": "^1.49.1",
+    "playwright": "^1.57.0",
     "postcss": "^8.4.16",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
@@ -92,7 +92,7 @@
     "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.4.0",
     "typescript": "^5.2.2",
-    "vite": "^6.2.5",
+    "vite": "^7.3.0",
     "vite-plugin-ruby": "^5.1.0"
   },
   "prettier": "@github/prettier-config",

package/static/arguments.json

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

package/static/form_previews.json

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