@primer/react 38.6.3-rc.f8f5fddc3 → 38.7.0-rc.b626e5d83

package/dist/PageLayout/PageLayout.module.css.js

@@ -1,4 +1,4 @@
-import './PageLayout-c092f3db.css';
+import './PageLayout-51007c87.css';
 
 var classes = {"paneMaxWidthDiffBreakpoint":"1280","paneMaxWidthDiffDefault":"511","PageLayoutRoot":"prc-PageLayout-PageLayoutRoot--KH-d","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-2BhU2","PageLayoutContent":"prc-PageLayout-PageLayoutContent-BneH9","HorizontalDivider":"prc-PageLayout-HorizontalDivider-JLVqp","VerticalDivider":"prc-PageLayout-VerticalDivider-9QRmK","Header":"prc-PageLayout-Header-0of-R","HeaderContent":"prc-PageLayout-HeaderContent-gdFfN","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-odAHl","ContentWrapper":"prc-PageLayout-ContentWrapper-gR9eG","Content":"prc-PageLayout-Content-xWL-A","PaneWrapper":"prc-PageLayout-PaneWrapper-pHPop","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-le57g","Pane":"prc-PageLayout-Pane-AyzHK","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-9tbnE","FooterWrapper":"prc-PageLayout-FooterWrapper-9cB8y","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-W-RaS","FooterContent":"prc-PageLayout-FooterContent-HUS0V","DraggableHandle":"prc-PageLayout-DraggableHandle-9s6B4"};
 

package/dist/PageLayout/paneUtils.d.ts

@@ -0,0 +1,11 @@
+type DraggingStylesParams = {
+    handle: HTMLElement | null;
+    pane: HTMLElement | null;
+    contentWrapper: HTMLElement | null;
+};
+/** Apply visual feedback and performance optimizations during drag */
+export declare function setDraggingStyles({ handle, pane, contentWrapper }: DraggingStylesParams): void;
+/** Remove drag styles and restore normal state */
+export declare function removeDraggingStyles({ handle, pane, contentWrapper }: DraggingStylesParams): void;
+export {};
+//# sourceMappingURL=paneUtils.d.ts.map

package/dist/PageLayout/paneUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paneUtils.d.ts","sourceRoot":"","sources":["../../src/PageLayout/paneUtils.ts"],"names":[],"mappings":"AAAA,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,IAAI,EAAE,WAAW,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,WAAW,GAAG,IAAI,CAAA;CACnC,CAAA;AAID,sEAAsE;AACtE,wBAAgB,iBAAiB,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAC,EAAE,oBAAoB,QAWrF;AAED,kDAAkD;AAClD,wBAAgB,oBAAoB,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAC,EAAE,oBAAoB,QAOxF"}

package/dist/PageLayout/paneUtils.js

@@ -0,0 +1,34 @@
+const DATA_DRAGGING_ATTR = 'data-dragging';
+
+/** Apply visual feedback and performance optimizations during drag */
+function setDraggingStyles({
+  handle,
+  pane,
+  contentWrapper
+}) {
+  // Handle visual feedback (must be inline for instant response)
+  // Use CSS variable to control ::before pseudo-element background color.
+  // This avoids cascade conflicts between inline styles and pseudo-element backgrounds.
+  handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--bg-color', 'var(--bgColor-accent-emphasis)');
+  handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--drag-opacity', '1');
+  handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--transition', 'none');
+
+  // Set attribute for CSS containment (O(1) direct selector, not descendant)
+  pane === null || pane === void 0 ? void 0 : pane.setAttribute(DATA_DRAGGING_ATTR, 'true');
+  contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.setAttribute(DATA_DRAGGING_ATTR, 'true');
+}
+
+/** Remove drag styles and restore normal state */
+function removeDraggingStyles({
+  handle,
+  pane,
+  contentWrapper
+}) {
+  handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--bg-color');
+  handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--drag-opacity');
+  handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--transition');
+  pane === null || pane === void 0 ? void 0 : pane.removeAttribute(DATA_DRAGGING_ATTR);
+  contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.removeAttribute(DATA_DRAGGING_ATTR);
+}
+
+export { removeDraggingStyles, setDraggingStyles };

package/dist/PageLayout/usePaneWidth.d.ts

@@ -13,6 +13,7 @@ export type UsePaneWidthOptions = {
     widthStorageKey: string;
     paneRef: React.RefObject<HTMLDivElement | null>;
     handleRef: React.RefObject<HTMLDivElement | null>;
+    contentWrapperRef: React.RefObject<HTMLDivElement | null>;
 };
 export type UsePaneWidthResult = {
     /** Current width for React state (used in ARIA attributes) */
@@ -66,6 +67,6 @@ export declare const updateAriaValues: (handle: HTMLElement | null, values: {
  * Handles initialization from storage, clamping on viewport resize, and provides
  * functions to save and reset width.
  */
-export declare function usePaneWidth({ width, minWidth, resizable, widthStorageKey, paneRef, handleRef, }: UsePaneWidthOptions): UsePaneWidthResult;
+export declare function usePaneWidth({ width, minWidth, resizable, widthStorageKey, paneRef, handleRef, contentWrapperRef, }: UsePaneWidthOptions): UsePaneWidthResult;
 export {};
 //# sourceMappingURL=usePaneWidth.d.ts.map

package/dist/PageLayout/usePaneWidth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePaneWidth.d.ts","sourceRoot":"","sources":["../../src/PageLayout/usePaneWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAQ5C,KAAK,WAAW,GAAG,GAAG,MAAM,IAAI,CAAA;AAEhC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,WAAW,CAAA;IAChB,OAAO,EAAE,WAAW,CAAA;IACpB,GAAG,EAAE,WAAW,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,GAAG,kBAAkB,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAClD,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/C,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,eAAe,EAAE,MAAM,MAAM,CAAA;IAC7B,yDAAyD;IACzD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,6BAA6B;IAC7B,eAAe,EAAE,MAAM,MAAM,CAAA;CAC9B,CAAA;AAKD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,QAA6C,CAAA;AAIhF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAA;AAExC;;;GAGG;AACH,eAAO,MAAM,cAAc,IAAI,CAAA;AAE/B,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAyC,CAAA;AAKhG,eAAO,MAAM,oBAAoB,GAAI,OAAO,SAAS,GAAG,kBAAkB,KAAG,KAAK,IAAI,kBAGrF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,GAAG,kBAAkB,KAAG,KAAK,IAAI,SAE5E,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,GAAG,SAAS,GAAG,kBAAkB,KAAG,MAOvE,CAAA;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAI3E;AAID,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,WAAW,GAAG,IAAI,EAC1B,QAAQ;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAC,SASvD,CAAA;AAKD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,eAAe,EACf,OAAO,EACP,SAAS,GACV,EAAE,mBAAmB,GAAG,kBAAkB,CA8L1C"}
+{"version":3,"file":"usePaneWidth.d.ts","sourceRoot":"","sources":["../../src/PageLayout/usePaneWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAQ5C,KAAK,WAAW,GAAG,GAAG,MAAM,IAAI,CAAA;AAEhC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,WAAW,CAAA;IAChB,OAAO,EAAE,WAAW,CAAA;IACpB,GAAG,EAAE,WAAW,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,GAAG,kBAAkB,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACjD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC1D,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/C,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,eAAe,EAAE,MAAM,MAAM,CAAA;IAC7B,yDAAyD;IACzD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,6BAA6B;IAC7B,eAAe,EAAE,MAAM,MAAM,CAAA;CAC9B,CAAA;AAKD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,QAA6C,CAAA;AAIhF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAA;AAExC;;;GAGG;AACH,eAAO,MAAM,cAAc,IAAI,CAAA;AAE/B,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAyC,CAAA;AAKhG,eAAO,MAAM,oBAAoB,GAAI,OAAO,SAAS,GAAG,kBAAkB,KAAG,KAAK,IAAI,kBAGrF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,GAAG,kBAAkB,KAAG,KAAK,IAAI,SAE5E,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,GAAG,SAAS,GAAG,kBAAkB,KAAG,MAOvE,CAAA;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAI3E;AAID,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,WAAW,GAAG,IAAI,EAC1B,QAAQ;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAC,SASvD,CAAA;AAKD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,eAAe,EACf,OAAO,EACP,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,GAAG,kBAAkB,CA2M1C"}

package/dist/PageLayout/usePaneWidth.js

@@ -44,7 +44,7 @@ const isCustomWidthOptions = width => {
   return width.default !== undefined;
 };
 const isPaneWidth = width => {
-  return ['small', 'medium', 'large'].includes(width);
+  return width === 'small' || width === 'medium' || width === 'large';
 };
 const getDefaultPaneWidth = w => {
   if (isPaneWidth(w)) {
@@ -92,7 +92,8 @@ function usePaneWidth({
   resizable,
   widthStorageKey,
   paneRef,
-  handleRef
+  handleRef,
+  contentWrapperRef
 }) {
   // Derive constraints from width configuration
   const isCustomWidth = isCustomWidthOptions(width);
@@ -145,7 +146,10 @@ function usePaneWidth({
   const getDefaultWidth = React.useCallback(() => getDefaultPaneWidth(width), [width]);
   const saveWidth = React.useCallback(value => {
     currentWidthRef.current = value;
-    setCurrentWidth(value);
+    // Visual update already done via inline styles - React state sync is non-urgent
+    startTransition(() => {
+      setCurrentWidth(value);
+    });
     try {
       localStorage.setItem(widthStorageKey, value.toString());
     } catch {
@@ -161,24 +165,15 @@ function usePaneWidth({
   });
 
   // Update CSS variable, refs, and ARIA on mount and window resize.
-  // Strategy:
-  // 1. Throttled (16ms): Update --pane-max-width CSS variable for immediate visual clamp
-  // 2. Debounced (150ms): Sync refs, ARIA, and React state when resize stops
+  // Strategy: Only sync when resize stops (debounced) to avoid layout thrashing on large DOMs
   useIsomorphicLayoutEffect(() => {
-    var _paneRef$current4;
+    var _paneRef$current3;
     if (!resizable) return;
     let lastViewportWidth = window.innerWidth;
 
-    // Quick CSS-only update for immediate visual feedback (throttled)
-    const updateCSSOnly = () => {
-      var _paneRef$current;
-      const actualMax = getMaxPaneWidthRef.current();
-      (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.style.setProperty('--pane-max-width', `${actualMax}px`);
-    };
-
     // Full sync of refs, ARIA, and state (debounced, runs when resize stops)
     const syncAll = () => {
-      var _paneRef$current2;
+      var _paneRef$current;
       const currentViewportWidth = window.innerWidth;
 
       // Only call getComputedStyle if we crossed the breakpoint (expensive)
@@ -187,30 +182,30 @@ function usePaneWidth({
       if (crossedBreakpoint) {
         maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current);
       }
-      const actualMax_0 = getMaxPaneWidthRef.current();
+      const actualMax = getMaxPaneWidthRef.current();
 
       // Update CSS variable for visual clamping (may already be set by throttled update)
-      (_paneRef$current2 = paneRef.current) === null || _paneRef$current2 === void 0 ? void 0 : _paneRef$current2.style.setProperty('--pane-max-width', `${actualMax_0}px`);
+      (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.style.setProperty('--pane-max-width', `${actualMax}px`);
 
       // Track if we clamped current width
-      const wasClamped = currentWidthRef.current > actualMax_0;
+      const wasClamped = currentWidthRef.current > actualMax;
       if (wasClamped) {
-        var _paneRef$current3;
-        currentWidthRef.current = actualMax_0;
-        (_paneRef$current3 = paneRef.current) === null || _paneRef$current3 === void 0 ? void 0 : _paneRef$current3.style.setProperty('--pane-width', `${actualMax_0}px`);
+        var _paneRef$current2;
+        currentWidthRef.current = actualMax;
+        (_paneRef$current2 = paneRef.current) === null || _paneRef$current2 === void 0 ? void 0 : _paneRef$current2.style.setProperty('--pane-width', `${actualMax}px`);
       }
 
       // Update ARIA via DOM - cheap, no React re-render
       updateAriaValues(handleRef.current, {
-        max: actualMax_0,
+        max: actualMax,
         current: currentWidthRef.current
       });
 
       // Defer state updates so parent re-renders see accurate values
       startTransition(() => {
-        setMaxPaneWidth(actualMax_0);
+        setMaxPaneWidth(actualMax);
         if (wasClamped) {
-          setCurrentWidth(actualMax_0);
+          setCurrentWidth(actualMax);
         }
       });
     };
@@ -219,7 +214,7 @@ function usePaneWidth({
     maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current);
     const initialMax = getMaxPaneWidthRef.current();
     setMaxPaneWidth(initialMax);
-    (_paneRef$current4 = paneRef.current) === null || _paneRef$current4 === void 0 ? void 0 : _paneRef$current4.style.setProperty('--pane-max-width', `${initialMax}px`);
+    (_paneRef$current3 = paneRef.current) === null || _paneRef$current3 === void 0 ? void 0 : _paneRef$current3.style.setProperty('--pane-max-width', `${initialMax}px`);
     updateAriaValues(handleRef.current, {
       min: minPaneWidth,
       max: initialMax,
@@ -229,35 +224,51 @@ function usePaneWidth({
     // For custom widths, max is fixed - no need to listen to resize
     if (customMaxWidth !== null) return;
 
-    // Throttle CSS updates (16ms ≈ 60fps), debounce full sync (150ms)
-    const THROTTLE_MS = 16;
-    const DEBOUNCE_MS = 150;
+    // Throttle approach for window resize - provides immediate visual feedback for small DOMs
+    // while still limiting update frequency
+    const THROTTLE_MS = 16; // ~60fps
+    const DEBOUNCE_MS = 150; // Delay before removing containment after resize stops
+    let lastUpdateTime = 0;
+    let pendingUpdate = false;
     let rafId = null;
     let debounceId = null;
-    let lastThrottleTime = 0;
+    let isResizing = false;
+    const startResizeOptimizations = () => {
+      var _paneRef$current4, _contentWrapperRef$cu;
+      if (isResizing) return;
+      isResizing = true;
+      (_paneRef$current4 = paneRef.current) === null || _paneRef$current4 === void 0 ? void 0 : _paneRef$current4.setAttribute('data-dragging', 'true');
+      (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.setAttribute('data-dragging', 'true');
+    };
+    const endResizeOptimizations = () => {
+      var _paneRef$current5, _contentWrapperRef$cu2;
+      if (!isResizing) return;
+      isResizing = false;
+      (_paneRef$current5 = paneRef.current) === null || _paneRef$current5 === void 0 ? void 0 : _paneRef$current5.removeAttribute('data-dragging');
+      (_contentWrapperRef$cu2 = contentWrapperRef.current) === null || _contentWrapperRef$cu2 === void 0 ? void 0 : _contentWrapperRef$cu2.removeAttribute('data-dragging');
+    };
     const handleResize = () => {
+      // Apply containment on first resize event (stays applied until resize stops)
+      startResizeOptimizations();
       const now = Date.now();
-
-      // Throttled CSS update for immediate visual feedback
-      if (now - lastThrottleTime >= THROTTLE_MS) {
-        lastThrottleTime = now;
-        updateCSSOnly();
-      } else if (rafId === null) {
-        // Schedule next frame if we're within throttle window
+      if (now - lastUpdateTime >= THROTTLE_MS) {
+        lastUpdateTime = now;
+        syncAll();
+      } else if (!pendingUpdate) {
+        pendingUpdate = true;
         rafId = requestAnimationFrame(() => {
+          pendingUpdate = false;
           rafId = null;
-          lastThrottleTime = Date.now();
-          updateCSSOnly();
+          lastUpdateTime = Date.now();
+          syncAll();
         });
       }
 
-      // Debounced full sync (refs, ARIA, state) when resize stops
-      if (debounceId !== null) {
-        clearTimeout(debounceId);
-      }
+      // Debounce the cleanup — remove containment after resize stops
+      if (debounceId !== null) clearTimeout(debounceId);
       debounceId = setTimeout(() => {
         debounceId = null;
-        syncAll();
+        endResizeOptimizations();
       }, DEBOUNCE_MS);
     };
 
@@ -266,9 +277,10 @@ function usePaneWidth({
     return () => {
       if (rafId !== null) cancelAnimationFrame(rafId);
       if (debounceId !== null) clearTimeout(debounceId);
+      endResizeOptimizations();
       window.removeEventListener('resize', handleResize);
     };
-  }, [resizable, customMaxWidth, minPaneWidth, paneRef, handleRef]);
+  }, [resizable, customMaxWidth, minPaneWidth, paneRef, handleRef, contentWrapperRef]);
   return {
     currentWidth,
     currentWidthRef,

package/dist/SelectPanel/SelectPanel.d.ts

@@ -50,6 +50,11 @@ interface SelectPanelBaseProps {
      */
     disableFullscreenOnNarrow?: boolean;
     showSelectAll?: boolean;
+    /**
+     * Set to true to allow focus to move to elements that are dynamically prepended to the container.
+     * Default is false.
+     */
+    focusPrependedElements?: boolean;
 }
 type SelectPanelVariantProps = {
     variant?: 'anchored';
@@ -59,7 +64,7 @@ type SelectPanelVariantProps = {
     onCancel: () => void;
 };
 export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps;
-declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, ...listProps }: SelectPanelProps): JSX.Element;
+declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, focusPrependedElements, ...listProps }: SelectPanelProps): JSX.Element;
 declare const SecondaryButton: React.FC<ButtonProps>;
 declare const SecondaryLink: React.FC<LinkButtonProps & ButtonProps>;
 export declare const SelectPanel: typeof Panel & {

package/dist/SelectPanel/SelectPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"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"}

package/dist/SelectPanel/SelectPanel.js

@@ -107,6 +107,7 @@ function Panel({
   disableFullscreenOnNarrow,
   align,
   showSelectAll = false,
+  focusPrependedElements,
   ...listProps
 }) {
   var _listProps$groupMetad;
@@ -679,7 +680,8 @@ function Panel({
             description: typeof (message === null || message === void 0 ? void 0 : message.body) === 'string' ? message.body : EMPTY_MESSAGE.description
           },
           fullScreenOnNarrow: usingFullScreenOnNarrow,
-          className: clsx(className, classes.FilteredActionList)
+          className: clsx(className, classes.FilteredActionList),
+          focusPrependedElements: focusPrependedElements
         }), footer ? /*#__PURE__*/jsx("div", {
           className: classes.Footer,
           children: footer

package/dist/TextInput/TextInput-dff8f842.css

@@ -0,0 +1,2 @@
+.prc-TextInput-CharacterCounter-vJZBe{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;gap:var(--control-xsmall-gap,.25rem)}.prc-TextInput-CharacterCounter--error-HA0kN{color:var(--fgColor-danger,var(--color-danger-fg))}
+/*# sourceMappingURL=TextInput-dff8f842.css.map */

package/dist/TextInput/TextInput-dff8f842.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TextInput/TextInput.module.css.js"],"names":[],"mappings":"AAAA,sCAEE,kBAAmB,CAEnB,gDAA2B,CAH3B,YAAa,CAEb,oCAEF,CAEA,6CACE,kDACF","file":"TextInput-dff8f842.css","sourcesContent":[".CharacterCounter {\n  display: flex;\n  align-items: center;\n  gap: var(--control-xsmall-gap);\n  color: var(--fgColor-muted);\n}\n\n.CharacterCounter--error {\n  color: var(--fgColor-danger);\n}\n"]}

package/dist/TextInput/TextInput.d.ts

@@ -28,6 +28,11 @@ export type TextInputNonPassthroughProps = {
      * A visual that renders inside the input after the typing area
      */
     trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>;
+    /**
+     * Optional character limit for the input. If provided, a character counter will be displayed below the input.
+     * When the limit is exceeded, validation styling will be applied.
+     */
+    characterLimit?: number;
 } & Partial<Pick<StyledWrapperProps, 'block' | 'contrast' | 'disabled' | 'monospace' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size' | 'validationStatus'>>;
 export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>;
 declare const _default: PolymorphicForwardRefComponent<"input", TextInputProps> & {

package/dist/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqC,MAAM,OAAO,CAAA;AAEzD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAA;AAM/E,MAAM,MAAM,4BAA4B,GAAG;IACzC,uEAAuE;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;QAKI;IACJ,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAA;IAChD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;IACnD;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;IACpD;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;CACxE,GAAG,OAAO,CACT,IAAI,CACF,kBAAkB,EAChB,OAAO,GACP,UAAU,GACV,UAAU,GACV,WAAW,GACX,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,GACT,MAAM,GACN,kBAAkB,CACrB,CACF,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,4BAA4B,CAAC,CAAA;;;;;;;;;;;AA+IzG,wBAGE"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwD,MAAM,OAAO,CAAA;AAE5E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAA;AAQ/E,MAAM,MAAM,4BAA4B,GAAG;IACzC,uEAAuE;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;QAKI;IACJ,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAA;IAChD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;IACnD;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;IACpD;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACvE;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,OAAO,CACT,IAAI,CACF,kBAAkB,EAChB,OAAO,GACP,UAAU,GACV,UAAU,GACV,WAAW,GACX,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,GACT,MAAM,GACN,kBAAkB,CACrB,CACF,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,4BAA4B,CAAC,CAAA;;;;;;;;;;;AAiOzG,wBAGE"}

package/dist/TextInput/TextInput.js

@@ -1,13 +1,17 @@
-import React, { useState, useId, useCallback } from 'react';
+import React, { useState, useRef, useId, useCallback, useEffect } from 'react';
 import { isValidElementType } from 'react-is';
 import { clsx } from 'clsx';
+import { AlertFillIcon } from '@primer/octicons-react';
+import classes from './TextInput.module.css.js';
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot.js';
 import { TextInputWrapper } from '../internal/components/TextInputWrapper.js';
 import TextInputAction from '../internal/components/TextInputInnerAction.js';
 import UnstyledTextInput from '../internal/components/UnstyledTextInput.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { CharacterCounter } from '../utils/character-counter.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+import Text from '../Text/Text.js';
 
 // using forwardRef is important so that other components can autofocus the input
 const TextInput = /*#__PURE__*/React.forwardRef(({
@@ -35,10 +39,19 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
   // end deprecated props
   type = 'text',
   required,
+  characterLimit,
+  onChange,
+  value,
+  defaultValue,
   ...inputProps
 }, ref) => {
   const [isInputFocused, setIsInputFocused] = useState(false);
   const inputRef = useProvidedRefOrCreate(ref);
+  const [characterCount, setCharacterCount] = useState('');
+  const [isOverLimit, setIsOverLimit] = useState(false);
+  const [screenReaderMessage, setScreenReaderMessage] = useState('');
+  const characterCounterRef = useRef(null);
+
   // this class is necessary to style FilterSearch, plz no touchy!
   const wrapperClasses = clsx(className, 'TextInput-wrapper');
   const showLeadingLoadingIndicator = loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'));
@@ -65,56 +78,117 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
     setIsInputFocused(false);
     onBlur && onBlur(e_1);
   }, [onBlur]);
-  return /*#__PURE__*/jsxs(TextInputWrapper, {
-    block: block,
-    className: wrapperClasses,
-    validationStatus: validationStatus,
-    contrast: contrast,
-    disabled: disabled,
-    monospace: monospace,
-    size: sizeProp,
-    width: widthProp,
-    minWidth: minWidthProp,
-    maxWidth: maxWidthProp,
-    variant: variantProp,
-    hasLeadingVisual: Boolean(LeadingVisual || showLeadingLoadingIndicator),
-    hasTrailingVisual: Boolean(TrailingVisual || showTrailingLoadingIndicator),
-    hasTrailingAction: Boolean(trailingAction),
-    isInputFocused: isInputFocused,
-    onClick: focusInput,
-    "aria-busy": Boolean(loading),
-    children: [IconComponent && /*#__PURE__*/jsx(IconComponent, {
-      className: "TextInput-icon"
-    }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
-      visualPosition: "leading",
-      showLoadingIndicator: showLeadingLoadingIndicator,
-      hasLoadingIndicator: typeof loading === 'boolean',
-      id: leadingVisualId,
-      children: typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? /*#__PURE__*/jsx(LeadingVisual, {}) : LeadingVisual
-    }), /*#__PURE__*/jsx(UnstyledTextInput
-    // @ts-expect-error it needs a non nullable ref
-    , {
-      ref: inputRef,
+
+  // Initialize character counter
+  useEffect(() => {
+    if (characterLimit) {
+      characterCounterRef.current = new CharacterCounter({
+        onCountUpdate: (count, overLimit, message) => {
+          setCharacterCount(message);
+          setIsOverLimit(overLimit);
+        },
+        onScreenReaderAnnounce: message_0 => {
+          setScreenReaderMessage(message_0);
+        }
+      });
+      return () => {
+        var _characterCounterRef$;
+        (_characterCounterRef$ = characterCounterRef.current) === null || _characterCounterRef$ === void 0 ? void 0 : _characterCounterRef$.cleanup();
+        characterCounterRef.current = null;
+      };
+    }
+  }, [characterLimit]);
+
+  // Update character count when value changes or on mount
+  useEffect(() => {
+    if (characterLimit && characterCounterRef.current) {
+      const currentValue = value !== undefined ? String(value) : defaultValue !== undefined ? String(defaultValue) : '';
+      characterCounterRef.current.updateCharacterCount(currentValue.length, characterLimit);
+    }
+  }, [value, defaultValue, characterLimit]);
+
+  // Handle input change with character counter
+  const handleInputChange = useCallback(e_2 => {
+    if (characterLimit && characterCounterRef.current) {
+      characterCounterRef.current.updateCharacterCount(e_2.target.value.length, characterLimit);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(e_2);
+  }, [onChange, characterLimit]);
+  const characterCountId = useId();
+  const characterCountStaticMessageId = useId();
+  const isValid = isOverLimit ? 'error' : validationStatus;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(TextInputWrapper, {
+      block: block,
+      className: wrapperClasses,
+      validationStatus: isValid,
+      contrast: contrast,
       disabled: disabled,
-      onFocus: handleInputFocus,
-      onBlur: handleInputBlur,
-      type: type,
-      "aria-required": required,
-      "aria-invalid": validationStatus === 'error' ? 'true' : undefined,
-      ...inputProps,
-      "aria-describedby": inputDescribedBy,
-      "data-component": "input"
-    }), loading && /*#__PURE__*/jsx(VisuallyHidden, {
-      id: loadingId,
-      children: loaderText
-    }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
-      visualPosition: "trailing",
-      showLoadingIndicator: showTrailingLoadingIndicator,
-      hasLoadingIndicator: typeof loading === 'boolean',
-      id: trailingVisualId,
-      "data-testid": "text-input-trailing-visual",
-      children: typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
-    }), trailingAction]
+      monospace: monospace,
+      size: sizeProp,
+      width: widthProp,
+      minWidth: minWidthProp,
+      maxWidth: maxWidthProp,
+      variant: variantProp,
+      hasLeadingVisual: Boolean(LeadingVisual || showLeadingLoadingIndicator),
+      hasTrailingVisual: Boolean(TrailingVisual || showTrailingLoadingIndicator),
+      hasTrailingAction: Boolean(trailingAction),
+      isInputFocused: isInputFocused,
+      onClick: focusInput,
+      "aria-busy": Boolean(loading),
+      children: [IconComponent && /*#__PURE__*/jsx(IconComponent, {
+        className: "TextInput-icon"
+      }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
+        visualPosition: "leading",
+        showLoadingIndicator: showLeadingLoadingIndicator,
+        hasLoadingIndicator: typeof loading === 'boolean',
+        id: leadingVisualId,
+        children: typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? /*#__PURE__*/jsx(LeadingVisual, {}) : LeadingVisual
+      }), /*#__PURE__*/jsx(UnstyledTextInput
+      // @ts-expect-error it needs a non nullable ref
+      , {
+        ref: inputRef,
+        disabled: disabled,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onChange: handleInputChange,
+        type: type,
+        "aria-required": required,
+        "aria-invalid": isValid === 'error' ? 'true' : undefined,
+        value: value,
+        defaultValue: defaultValue,
+        ...inputProps,
+        "aria-describedby": characterLimit ? [characterCountStaticMessageId, inputDescribedBy].filter(Boolean).join(' ') || undefined : inputDescribedBy,
+        "data-component": "input"
+      }), loading && /*#__PURE__*/jsx(VisuallyHidden, {
+        id: loadingId,
+        children: loaderText
+      }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
+        visualPosition: "trailing",
+        showLoadingIndicator: showTrailingLoadingIndicator,
+        hasLoadingIndicator: typeof loading === 'boolean',
+        id: trailingVisualId,
+        "data-testid": "text-input-trailing-visual",
+        children: typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
+      }), trailingAction]
+    }), characterLimit && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(VisuallyHidden, {
+        "aria-live": "polite",
+        role: "status",
+        children: screenReaderMessage
+      }), /*#__PURE__*/jsxs(VisuallyHidden, {
+        id: characterCountStaticMessageId,
+        children: ["You can enter up to ", characterLimit, " ", characterLimit === 1 ? 'character' : 'characters']
+      }), /*#__PURE__*/jsxs(Text, {
+        "aria-hidden": "true",
+        id: characterCountId,
+        size: "small",
+        className: clsx(classes.CharacterCounter, isOverLimit && classes['CharacterCounter--error']),
+        children: [isOverLimit && /*#__PURE__*/jsx(AlertFillIcon, {
+          size: 16
+        }), characterCount]
+      })]
+    })]
   });
 });
 TextInput.displayName = 'TextInput';

package/dist/TextInput/TextInput.module.css.js

@@ -0,0 +1,5 @@
+import './TextInput-dff8f842.css';
+
+var classes = {"CharacterCounter":"prc-TextInput-CharacterCounter-vJZBe","CharacterCounter--error":"prc-TextInput-CharacterCounter--error-HA0kN"};
+
+export { classes as default };

package/dist/Textarea/{TextArea-54099020.css → TextArea-53e27580.css}

@@ -1,2 +1,2 @@
-.prc-Textarea-TextArea-snlco{appearance:none;background-color:transparent;border:0;color:inherit;font-family:inherit;font-size:inherit;resize:both;width:100%}.prc-Textarea-TextArea-snlco:focus{outline:0}.prc-Textarea-TextArea-snlco[data-resize=none]{resize:none}.prc-Textarea-TextArea-snlco[data-resize=both]{resize:both}.prc-Textarea-TextArea-snlco[data-resize=horizontal]{resize:horizontal}.prc-Textarea-TextArea-snlco[data-resize=vertical]{resize:vertical}.prc-Textarea-TextArea-snlco:disabled{resize:none}
-/*# sourceMappingURL=TextArea-54099020.css.map */
+.prc-Textarea-TextArea-snlco{appearance:none;background-color:transparent;border:0;color:inherit;font-family:inherit;font-size:inherit;resize:both;width:100%}.prc-Textarea-TextArea-snlco:focus{outline:0}.prc-Textarea-TextArea-snlco[data-resize=none]{resize:none}.prc-Textarea-TextArea-snlco[data-resize=both]{resize:both}.prc-Textarea-TextArea-snlco[data-resize=horizontal]{resize:horizontal}.prc-Textarea-TextArea-snlco[data-resize=vertical]{resize:vertical}.prc-Textarea-TextArea-snlco:disabled{resize:none}.prc-Textarea-CharacterCounter-qnOXd{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;gap:var(--control-xsmall-gap,.25rem)}.prc-Textarea-CharacterCounter--error-eewrs{color:var(--fgColor-danger,var(--color-danger-fg))}
+/*# sourceMappingURL=TextArea-53e27580.css.map */

package/dist/Textarea/TextArea-53e27580.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Textarea/TextArea.module.css.js"],"names":[],"mappings":"AAAA,6BAQE,eAAgB,CAFhB,4BAA6B,CAC7B,QAAS,CAHT,aAAc,CAFd,mBAAoB,CACpB,iBAAkB,CAElB,WAAY,CAJZ,UAQF,CAEA,mCACE,SACF,CAEA,+CACE,WACF,CAEA,+CACE,WACF,CAEA,qDACE,iBACF,CAEA,mDACE,eACF,CAEA,sCACE,WACF,CAEA,qCAEE,kBAAmB,CAEnB,gDAA2B,CAH3B,YAAa,CAEb,oCAEF,CAEA,4CACE,kDACF","file":"TextArea-53e27580.css","sourcesContent":[".TextArea {\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  resize: both;\n  background-color: transparent;\n  border: 0;\n  appearance: none;\n}\n\n.TextArea:focus {\n  outline: 0;\n}\n\n.TextArea[data-resize='none'] {\n  resize: none;\n}\n\n.TextArea[data-resize='both'] {\n  resize: both;\n}\n\n.TextArea[data-resize='horizontal'] {\n  resize: horizontal;\n}\n\n.TextArea[data-resize='vertical'] {\n  resize: vertical;\n}\n\n.TextArea:disabled {\n  resize: none;\n}\n\n.CharacterCounter {\n  display: flex;\n  align-items: center;\n  gap: var(--control-xsmall-gap);\n  color: var(--fgColor-muted);\n}\n\n.CharacterCounter--error {\n  color: var(--fgColor-danger);\n}\n"]}

package/dist/Textarea/TextArea.module.css.js

@@ -1,5 +1,5 @@
-import './TextArea-54099020.css';
+import './TextArea-53e27580.css';
 
-var classes = {"TextArea":"prc-Textarea-TextArea-snlco"};
+var classes = {"TextArea":"prc-Textarea-TextArea-snlco","CharacterCounter":"prc-Textarea-CharacterCounter-qnOXd","CharacterCounter--error":"prc-Textarea-CharacterCounter--error-eewrs"};
 
 export { classes as default };

package/dist/Textarea/Textarea.d.ts

@@ -42,6 +42,11 @@ export type TextareaProps = {
      * CSS styles to apply to the Textarea
      */
     style?: React.CSSProperties;
+    /**
+     * Optional character limit for the textarea. If provided, a character counter will be displayed below the textarea.
+     * When the limit is exceeded, validation styling will be applied.
+     */
+    characterLimit?: number;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
 /**
  * An accessible, native textarea component that supports validation states.
@@ -84,6 +89,11 @@ declare const Textarea: React.ForwardRefExoticComponent<{
      * CSS styles to apply to the Textarea
      */
     style?: React.CSSProperties;
+    /**
+     * Optional character limit for the textarea. If provided, a character counter will be displayed below the textarea.
+     * When the limit is exceeded, validation styling will be applied.
+     */
+    characterLimit?: number;
 } & TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 declare const _default: WithSlotMarker<typeof Textarea>;
 export default _default;