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

package/dist/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAe,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAE7E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAA;AAE/C;;;GAGG;AACH,QAAA,MAAM,QAAQ;IA1CZ;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,oBAAoB;IACvC;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU;IACpD;;OAEG;eACQ,OAAO;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;2FAwD5B,CAAA;wBAK0B,cAAc,CAAC,OAAO,QAAQ,CAAC;AAA1D,wBAA0D"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAe,MAAM,OAAO,CAAA;AAC/D,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAE7E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAOlD,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAA;AAE/C;;;GAGG;AACH,QAAA,MAAM,QAAQ;IA/CZ;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,oBAAoB;IACvC;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU;IACpD;;OAEG;eACQ,OAAO;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;;OAGG;qBACc,MAAM;2FAyIxB,CAAA;wBAK0B,cAAc,CAAC,OAAO,QAAQ,CAAC;AAA1D,wBAA0D"}

package/dist/Textarea/Textarea.js

@@ -1,8 +1,13 @@
 import { c } from 'react-compiler-runtime';
-import React from 'react';
+import React, { useRef, useId, useEffect } from 'react';
 import { TextInputBaseWrapper } from '../internal/components/TextInputWrapper.js';
 import classes from './TextArea.module.css.js';
-import { jsx } from 'react/jsx-runtime';
+import { AlertFillIcon } from '@primer/octicons-react';
+import { CharacterCounter } from '../utils/character-counter.js';
+import VisuallyHidden from '../_VisuallyHidden.js';
+import { clsx } from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Text from '../Text/Text.js';
 
 const DEFAULT_TEXTAREA_ROWS = 7;
 const DEFAULT_TEXTAREA_COLS = 30;
@@ -12,13 +17,16 @@ const DEFAULT_TEXTAREA_RESIZE = 'both';
  * This component accepts all native HTML <textarea> attributes as props.
  */
 const Textarea = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(37);
+  const $ = c(68);
   let block;
+  let characterLimit;
   let className;
   let contrast;
+  let defaultValue;
   let disabled;
   let maxHeight;
   let minHeight;
+  let onChange;
   let required;
   let rest;
   let style;
@@ -42,107 +50,245 @@ const Textarea = /*#__PURE__*/React.forwardRef((t0, ref) => {
       minHeight,
       maxHeight,
       style,
+      characterLimit,
+      onChange,
+      defaultValue,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = block;
-    $[2] = className;
-    $[3] = contrast;
-    $[4] = disabled;
-    $[5] = maxHeight;
-    $[6] = minHeight;
-    $[7] = required;
-    $[8] = rest;
-    $[9] = style;
-    $[10] = t1;
-    $[11] = t2;
-    $[12] = t3;
-    $[13] = validationStatus;
-    $[14] = value;
+    $[2] = characterLimit;
+    $[3] = className;
+    $[4] = contrast;
+    $[5] = defaultValue;
+    $[6] = disabled;
+    $[7] = maxHeight;
+    $[8] = minHeight;
+    $[9] = onChange;
+    $[10] = required;
+    $[11] = rest;
+    $[12] = style;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = validationStatus;
+    $[17] = value;
   } else {
     block = $[1];
-    className = $[2];
-    contrast = $[3];
-    disabled = $[4];
-    maxHeight = $[5];
-    minHeight = $[6];
-    required = $[7];
-    rest = $[8];
-    style = $[9];
-    t1 = $[10];
-    t2 = $[11];
-    t3 = $[12];
-    validationStatus = $[13];
-    value = $[14];
+    characterLimit = $[2];
+    className = $[3];
+    contrast = $[4];
+    defaultValue = $[5];
+    disabled = $[6];
+    maxHeight = $[7];
+    minHeight = $[8];
+    onChange = $[9];
+    required = $[10];
+    rest = $[11];
+    style = $[12];
+    t1 = $[13];
+    t2 = $[14];
+    t3 = $[15];
+    validationStatus = $[16];
+    value = $[17];
   }
   const rows = t1 === undefined ? DEFAULT_TEXTAREA_ROWS : t1;
   const cols = t2 === undefined ? DEFAULT_TEXTAREA_COLS : t2;
   const resize = t3 === undefined ? DEFAULT_TEXTAREA_RESIZE : t3;
-  const t4 = validationStatus === "error" ? "true" : "false";
+  const [characterCount, setCharacterCount] = React.useState("");
+  const [isOverLimit, setIsOverLimit] = React.useState(false);
+  const [screenReaderMessage, setScreenReaderMessage] = React.useState("");
+  const characterCounterRef = useRef(null);
+  const characterCountId = useId();
+  const characterCountStaticMessageId = useId();
+  let t4;
   let t5;
-  if ($[15] !== maxHeight || $[16] !== minHeight || $[17] !== style) {
-    t5 = {
+  if ($[18] !== characterLimit) {
+    t4 = () => {
+      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();
+        };
+      }
+    };
+    t5 = [characterLimit];
+    $[18] = characterLimit;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t4 = $[19];
+    t5 = $[20];
+  }
+  useEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[21] !== characterLimit || $[22] !== defaultValue || $[23] !== value) {
+    t6 = () => {
+      if (characterLimit && characterCounterRef.current) {
+        const currentValue = value !== undefined ? String(value) : defaultValue !== undefined ? String(defaultValue) : "";
+        characterCounterRef.current.updateCharacterCount(currentValue.length, characterLimit);
+      }
+    };
+    t7 = [value, defaultValue, characterLimit];
+    $[21] = characterLimit;
+    $[22] = defaultValue;
+    $[23] = value;
+    $[24] = t6;
+    $[25] = t7;
+  } else {
+    t6 = $[24];
+    t7 = $[25];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[26] !== characterLimit || $[27] !== onChange) {
+    t8 = e => {
+      var _onChange;
+      if (characterLimit && characterCounterRef.current) {
+        characterCounterRef.current.updateCharacterCount(e.target.value.length, characterLimit);
+      }
+      (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(e);
+    };
+    $[26] = characterLimit;
+    $[27] = onChange;
+    $[28] = t8;
+  } else {
+    t8 = $[28];
+  }
+  const handleTextareaChange = t8;
+  const isValid = isOverLimit ? "error" : validationStatus;
+  const t9 = isValid === "error" ? "true" : "false";
+  let t10;
+  if ($[29] !== maxHeight || $[30] !== minHeight || $[31] !== style) {
+    t10 = {
       minHeight,
       maxHeight,
       ...style
     };
-    $[15] = maxHeight;
-    $[16] = minHeight;
-    $[17] = style;
-    $[18] = t5;
+    $[29] = maxHeight;
+    $[30] = minHeight;
+    $[31] = style;
+    $[32] = t10;
   } else {
-    t5 = $[18];
+    t10 = $[32];
   }
-  let t6;
-  if ($[19] !== cols || $[20] !== disabled || $[21] !== ref || $[22] !== required || $[23] !== resize || $[24] !== rest || $[25] !== rows || $[26] !== t4 || $[27] !== t5 || $[28] !== value) {
-    t6 = /*#__PURE__*/jsx("textarea", {
+  let t11;
+  if ($[33] !== characterCountStaticMessageId || $[34] !== characterLimit || $[35] !== rest) {
+    t11 = characterLimit ? [characterCountStaticMessageId, rest["aria-describedby"]].filter(Boolean).join(" ") || undefined : rest["aria-describedby"];
+    $[33] = characterCountStaticMessageId;
+    $[34] = characterLimit;
+    $[35] = rest;
+    $[36] = t11;
+  } else {
+    t11 = $[36];
+  }
+  let t12;
+  if ($[37] !== cols || $[38] !== defaultValue || $[39] !== disabled || $[40] !== handleTextareaChange || $[41] !== ref || $[42] !== required || $[43] !== resize || $[44] !== rest || $[45] !== rows || $[46] !== t10 || $[47] !== t11 || $[48] !== t9 || $[49] !== value) {
+    t12 = /*#__PURE__*/jsx("textarea", {
       value: value,
+      defaultValue: defaultValue,
       "data-resize": resize,
       "aria-required": required,
-      "aria-invalid": t4,
+      "aria-invalid": t9,
       ref: ref,
       disabled: disabled,
       rows: rows,
       cols: cols,
       className: classes.TextArea,
-      style: t5,
-      ...rest
+      onChange: handleTextareaChange,
+      style: t10,
+      ...rest,
+      "aria-describedby": t11
     });
-    $[19] = cols;
-    $[20] = disabled;
-    $[21] = ref;
-    $[22] = required;
-    $[23] = resize;
-    $[24] = rest;
-    $[25] = rows;
-    $[26] = t4;
-    $[27] = t5;
-    $[28] = value;
-    $[29] = t6;
+    $[37] = cols;
+    $[38] = defaultValue;
+    $[39] = disabled;
+    $[40] = handleTextareaChange;
+    $[41] = ref;
+    $[42] = required;
+    $[43] = resize;
+    $[44] = rest;
+    $[45] = rows;
+    $[46] = t10;
+    $[47] = t11;
+    $[48] = t9;
+    $[49] = value;
+    $[50] = t12;
   } else {
-    t6 = $[29];
+    t12 = $[50];
   }
-  let t7;
-  if ($[30] !== block || $[31] !== className || $[32] !== contrast || $[33] !== disabled || $[34] !== t6 || $[35] !== validationStatus) {
-    t7 = /*#__PURE__*/jsx(TextInputBaseWrapper, {
-      validationStatus: validationStatus,
+  let t13;
+  if ($[51] !== block || $[52] !== className || $[53] !== contrast || $[54] !== disabled || $[55] !== isValid || $[56] !== t12) {
+    t13 = /*#__PURE__*/jsx(TextInputBaseWrapper, {
+      validationStatus: isValid,
       disabled: disabled,
       block: block,
       contrast: contrast,
       className: className,
-      children: t6
+      children: t12
+    });
+    $[51] = block;
+    $[52] = className;
+    $[53] = contrast;
+    $[54] = disabled;
+    $[55] = isValid;
+    $[56] = t12;
+    $[57] = t13;
+  } else {
+    t13 = $[57];
+  }
+  let t14;
+  if ($[58] !== characterCount || $[59] !== characterCountId || $[60] !== characterCountStaticMessageId || $[61] !== characterLimit || $[62] !== isOverLimit || $[63] !== screenReaderMessage) {
+    t14 = 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]
+      })]
+    });
+    $[58] = characterCount;
+    $[59] = characterCountId;
+    $[60] = characterCountStaticMessageId;
+    $[61] = characterLimit;
+    $[62] = isOverLimit;
+    $[63] = screenReaderMessage;
+    $[64] = t14;
+  } else {
+    t14 = $[64];
+  }
+  let t15;
+  if ($[65] !== t13 || $[66] !== t14) {
+    t15 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t13, t14]
     });
-    $[30] = block;
-    $[31] = className;
-    $[32] = contrast;
-    $[33] = disabled;
-    $[34] = t6;
-    $[35] = validationStatus;
-    $[36] = t7;
+    $[65] = t13;
+    $[66] = t14;
+    $[67] = t15;
   } else {
-    t7 = $[36];
+    t15 = $[67];
   }
-  return t7;
+  return t15;
 });
 Textarea.displayName = 'Textarea';
 Textarea.__SLOT__ = Symbol('Textarea');

package/dist/ToggleSwitch/ToggleSwitch-40bab513.css

@@ -0,0 +1,2 @@
+.prc-ToggleSwitch-ToggleSwitch-rQz-0{--toggleSwitch-transition-duration:80ms;--toggleSwitch-transition-easing:cubic-bezier(0.5,1,0.89,1);align-items:center;display:inline-flex}.prc-ToggleSwitch-ToggleSwitch-rQz-0:where([data-status-label-position=start]){flex-direction:row}.prc-ToggleSwitch-ToggleSwitch-rQz-0:where([data-status-label-position=end]){flex-direction:row-reverse}.prc-ToggleSwitch-LoadingSpinner--4KG4{display:inline-flex}.prc-ToggleSwitch-LoadingSpinner--4KG4:where([data-status-label-position=end]){margin-left:var(--base-size-8,.5rem);margin-right:0}.prc-ToggleSwitch-StatusText-7fNOA{color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;font-size:var(--text-body-size-medium,.875rem);margin-left:var(--base-size-8,.5rem);margin-right:var(--base-size-8,.5rem);position:relative}.prc-ToggleSwitch-StatusText-7fNOA:where([data-disabled=true]){color:var(--fgColor-muted,var(--color-fg-muted));cursor:not-allowed}.prc-ToggleSwitch-StatusText-7fNOA:where([data-size=small]){font-size:var(--text-body-size-small,.75rem)}.prc-ToggleSwitch-StatusText-7fNOA:where([data-size=medium]){font-size:var(--text-body-size-medium,.875rem)}.prc-ToggleSwitch-StatusTextItem-VE86e{display:block;text-align:right}.prc-ToggleSwitch-StatusTextItem-VE86e:where([data-hidden=true]){height:0;overflow:hidden;visibility:hidden}.prc-ToggleSwitch-SwitchButton-1CtM6{appearance:none;border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);cursor:pointer;display:block;height:32px;overflow:hidden;padding:0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition-duration:var(--toggleSwitch-transition-duration);transition-property:background-color,border-color;transition-timing-function:var(--toggleSwitch-transition-easing);-webkit-user-select:none;user-select:none;width:64px}.prc-ToggleSwitch-SwitchButton-1CtM6:focus-visible{outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:3px}.prc-ToggleSwitch-SwitchButton-1CtM6:focus:not(:focus-visible){outline:1px solid transparent}@media (pointer:coarse){.prc-ToggleSwitch-SwitchButton-1CtM6:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}@media (prefers-reduced-motion){.prc-ToggleSwitch-SwitchButton-1CtM6,.prc-ToggleSwitch-SwitchButton-1CtM6 *{transition:none}}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-size=small]){height:24px;width:48px}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-disabled=true]){background-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg,#8c959f));border-color:transparent;cursor:not-allowed;transition-property:none}@media (forced-colors:active){.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-disabled=true]){border-color:GrayText}}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=false]:not([data-disabled=true])){background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg,#eaeef2));border-color:var(--controlTrack-borderColor-rest,var(--color-switch-track-border))}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=false]:not([data-disabled=true]):focus-visible),.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=false]:not([data-disabled=true]):hover){background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg,#dfe6ec))}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=false]:not([data-disabled=true]):active),.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=false]:not([data-disabled=true]):active:focus-visible){background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg,#d9e0e8))}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=true]:not([data-disabled=true])){background-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg,#0969da));border-color:var(--control-checked-borderColor-rest,transparent)}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=true]:not([data-disabled=true]):focus-visible),.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=true]:not([data-disabled=true]):hover){background-color:var(--control-checked-bgColor-hover,var(--color-switch-track-checked-hover-bg,#0860ca))}.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=true]:not([data-disabled=true]):active),.prc-ToggleSwitch-SwitchButton-1CtM6:where([data-checked=true]:not([data-disabled=true]):active:focus-visible){background-color:var(--control-checked-bgColor-active,var(--color-switch-track-checked-active-bg,#0757ba))}.prc-ToggleSwitch-SwitchButtonContent-u57jo{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.prc-ToggleSwitch-IconContainer-mUpUm{flex-basis:50%;flex-grow:1;flex-shrink:0;line-height:0;transition-duration:var(--toggleSwitch-transition-duration);transition-property:transform;transition-timing-function:var(--toggleSwitch-transition-easing)}@media (prefers-reduced-motion){.prc-ToggleSwitch-IconContainer-mUpUm{transition:none}}.prc-ToggleSwitch-LineIconContainer-cn8pC{color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg,#fff))}.prc-ToggleSwitch-LineIconContainer-cn8pC:where([data-disabled=true]){color:var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg,#fff))}.prc-ToggleSwitch-LineIconContainer-cn8pC:where([data-checked=true]){transform:translateX(0)}.prc-ToggleSwitch-LineIconContainer-cn8pC:where([data-checked=false]){transform:translateX(-100%)}.prc-ToggleSwitch-CircleIconContainer-XiMW5{color:var(--controlTrack-fgColor-rest,var(--color-switch-track-fg,#656d76))}.prc-ToggleSwitch-CircleIconContainer-XiMW5:where([data-disabled=true]){color:var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg,#fff))}.prc-ToggleSwitch-CircleIconContainer-XiMW5:where([data-checked=true]){transform:translateX(100%)}.prc-ToggleSwitch-CircleIconContainer-XiMW5:where([data-checked=false]){transform:translateX(0)}.prc-ToggleSwitch-ToggleKnob-N9ops{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg,#fff));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border,#858f99));border-radius:calc(var(--borderRadius-medium,.375rem) - var(--borderWidth-thin,.0625rem));border-style:solid;border-width:var(--borderWidth-thin,.0625rem);bottom:0;position:absolute;top:0;transition-duration:var(--toggleSwitch-transition-duration);transition-property:transform;transition-timing-function:var(--toggleSwitch-transition-easing);width:50%;z-index:1}@media (prefers-reduced-motion){.prc-ToggleSwitch-ToggleKnob-N9ops{transition:none}}.prc-ToggleSwitch-ToggleKnob-N9ops:where([data-checked=false]){transform:translateX(0)}.prc-ToggleSwitch-ToggleKnob-N9ops:where([data-checked=true]){border-color:var(--controlKnob-borderColor-checked,var(--color-switch-knob-checked-border,#0969da));transform:translateX(100%)}.prc-ToggleSwitch-ToggleKnob-N9ops:where([data-disabled=true]){background-color:var(--controlKnob-bgColor-disabled,var(--color-btn-bg));border-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg,#8c959f))}@media (forced-colors:active){.prc-ToggleSwitch-ToggleKnob-N9ops:where([data-disabled=true]){color:GrayText}}
+/*# sourceMappingURL=ToggleSwitch-40bab513.css.map */

package/dist/ToggleSwitch/ToggleSwitch-40bab513.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ToggleSwitch/ToggleSwitch.module.css.js"],"names":[],"mappings":"AAAA,qCACE,uCAAwC,CACxC,2DAA+D,CAG/D,kBAAmB,CADnB,mBAEF,CAEA,+EACE,kBACF,CAEA,6EACE,0BACF,CAEA,uCACE,mBACF,CAEA,+EAEE,oCAA+B,CAD/B,cAEF,CAEA,mCAIE,oDAA6B,CAE7B,cAAe,CADf,8CAAuC,CAJvC,oCAA+B,CAC/B,qCAAgC,CAChC,iBAIF,CAEA,+DAEE,gDAA2B,CAD3B,kBAEF,CAEA,4DACE,4CACF,CAEA,6DACE,8CACF,CAEA,uCACE,aAAc,CACd,gBACF,CAEA,iEAEE,QAAS,CACT,eAAgB,CAFhB,iBAGF,CAEA,qCAGE,eAAgB,CAMhB,gDAAyC,CACzC,kBAAmB,CACnB,6CAAqC,CAVrC,cAAe,CAWf,aAAc,CAKd,WAAY,CAHZ,eAAgB,CAThB,SAAU,CAQV,iBAAkB,CATlB,4BAAqB,CAArB,oBAAqB,CAGrB,2DAA4D,CAD5D,iDAAmD,CAEnD,gEAAiE,CANjE,wBAAiB,CAAjB,gBAAiB,CAgBjB,UAiCF,CA9BE,mDACE,kEAA4C,CAC5C,kBACF,CAEA,+DACE,6BACF,CAGA,wBACE,4CACE,UAAW,CAEX,MAAO,CAIP,eAAgB,CALhB,iBAAkB,CAElB,OAAQ,CAER,OAAQ,CADR,0BAGF,CACF,CAGA,gCAGE,4EACE,eACF,CACF,CAIF,8DACE,WAAY,CACZ,UACF,CAGA,iEAEE,mGAAsG,CACtG,wBAAyB,CACzB,kBAAmB,CACnB,wBAKF,CAHE,8BAPF,iEAQI,qBAEJ,CADE,CAGF,2FAEE,sFAAyF,CACzF,kFACF,CAEA,0MAGE,6FACF,CAEA,kNAGE,+FACF,CAEA,0FAEE,iGAAoG,CACpG,gEACF,CAEA,wMAGE,wGACF,CAEA,gNAGE,0GACF,CAEA,4CAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,sCAGE,cAAe,CAFf,WAAY,CACZ,aAAc,CAGd,aAAc,CAEd,2DAA4D,CAD5D,6BAA8B,CAE9B,gEAKF,CAHE,gCAVF,sCAWI,eAEJ,CADE,CAGF,0CAEE,mFACF,CAEA,sEAEE,gGACF,CAEA,qEACE,uBACF,CAEA,sEACE,2BACF,CAEA,4CAEE,2EACF,CAEA,wEAEE,qFACF,CAEA,uEACE,0BACF,CAEA,wEACE,uBACF,CAEA,mCAEE,iFAAoF,CAIpF,wFAA2F,CAG3F,yFAAyE,CALzE,kBAAmB,CADnB,6CAAqC,CAUrC,QAAS,CAFT,iBAAkB,CAClB,KAAM,CAGN,2DAA4D,CAD5D,6BAA8B,CAE9B,gEAAiE,CANjE,SAAU,CAOV,SAKF,CAHE,gCAnBF,mCAoBI,eAEJ,CADE,CAGF,+DACE,uBACF,CAEA,8DAGE,mGAAsG,CAFtG,0BAGF,CAEA,+DACE,wEAAqD,CAErD,+FAKF,CAHE,8BALF,+DAMI,cAEJ,CADE","file":"ToggleSwitch-40bab513.css","sourcesContent":[".ToggleSwitch {\n  --toggleSwitch-transition-duration: 80ms;\n  --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1);\n\n  display: inline-flex;\n  align-items: center;\n}\n\n.ToggleSwitch:where([data-status-label-position='start']) {\n  flex-direction: row;\n}\n\n.ToggleSwitch:where([data-status-label-position='end']) {\n  flex-direction: row-reverse;\n}\n\n.LoadingSpinner {\n  display: inline-flex;\n}\n\n.LoadingSpinner:where([data-status-label-position='end']) {\n  margin-right: 0;\n  margin-left: var(--base-size-8);\n}\n\n.StatusText {\n  margin-left: var(--base-size-8);\n  margin-right: var(--base-size-8);\n  position: relative;\n  color: var(--fgColor-default);\n  font-size: var(--text-body-size-medium);\n  cursor: pointer;\n}\n\n.StatusText:where([data-disabled='true']) {\n  cursor: not-allowed;\n  color: var(--fgColor-muted);\n}\n\n.StatusText:where([data-size='small']) {\n  font-size: var(--text-body-size-small);\n}\n\n.StatusText:where([data-size='medium']) {\n  font-size: var(--text-body-size-medium);\n}\n\n.StatusTextItem {\n  display: block;\n  text-align: right;\n}\n\n.StatusTextItem:where([data-hidden='true']) {\n  visibility: hidden;\n  height: 0;\n  overflow: hidden;\n}\n\n.SwitchButton {\n  cursor: pointer;\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n  padding: 0;\n  transition-property: background-color, border-color;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n  border-radius: var(--borderRadius-medium);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  display: block;\n  position: relative;\n  overflow: hidden;\n\n  /* Default medium size */\n  height: 32px;\n  width: 64px;\n\n  /* Focus styles */\n  &:focus-visible {\n    outline: 2px solid var(--focus-outlineColor);\n    outline-offset: 3px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: solid 1px transparent;\n  }\n\n  /* Touch device support */\n  @media (pointer: coarse) {\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      right: 0;\n      transform: translateY(-50%);\n      top: 50%;\n      min-height: 44px;\n    }\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    * {\n      transition: none;\n    }\n  }\n}\n\n/* Size variants */\n.SwitchButton:where([data-size='small']) {\n  height: 24px;\n  width: 48px;\n}\n\n/* State variants */\n.SwitchButton:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));\n  border-color: transparent;\n  cursor: not-allowed;\n  transition-property: none;\n\n  @media (forced-colors: active) {\n    border-color: GrayText;\n  }\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true'])) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2));\n  border-color: var(--controlTrack-borderColor-rest);\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover),\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsl(210deg, 24%, 90%, 1)));\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active),\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsl(210deg, 24%, 88%, 1)));\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true'])) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da));\n  border-color: var(--control-checked-borderColor-rest, transparent);\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):hover),\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca));\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active),\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba));\n}\n\n.SwitchButtonContent {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.IconContainer {\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: 50%;\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n  transition-property: transform;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.LineIconContainer {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff));\n}\n\n.LineIconContainer:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff));\n}\n\n.LineIconContainer:where([data-checked='true']) {\n  transform: translateX(0);\n}\n\n.LineIconContainer:where([data-checked='false']) {\n  transform: translateX(-100%);\n}\n\n.CircleIconContainer {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76));\n}\n\n.CircleIconContainer:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff));\n}\n\n.CircleIconContainer:where([data-checked='true']) {\n  transform: translateX(100%);\n}\n\n.CircleIconContainer:where([data-checked='false']) {\n  transform: translateX(0);\n}\n\n.ToggleKnob {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff));\n  border-width: var(--borderWidth-thin);\n  border-style: solid;\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99));\n  /* Use calc to account for 1px border around the control */\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thin));\n  width: 50%;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  transition-property: transform;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n  z-index: 1;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleKnob:where([data-checked='false']) {\n  transform: translateX(0);\n}\n\n.ToggleKnob:where([data-checked='true']) {\n  transform: translateX(100%);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da));\n}\n\n.ToggleKnob:where([data-disabled='true']) {\n  background-color: var(--controlKnob-bgColor-disabled);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));\n\n  @media (forced-colors: active) {\n    color: GrayText;\n  }\n}\n"]}

package/dist/ToggleSwitch/ToggleSwitch.module.css.js

@@ -1,4 +1,4 @@
-import './ToggleSwitch-d1bd60b0.css';
+import './ToggleSwitch-40bab513.css';
 
 var classes = {"ToggleSwitch":"prc-ToggleSwitch-ToggleSwitch-rQz-0","LoadingSpinner":"prc-ToggleSwitch-LoadingSpinner--4KG4","StatusText":"prc-ToggleSwitch-StatusText-7fNOA","StatusTextItem":"prc-ToggleSwitch-StatusTextItem-VE86e","SwitchButton":"prc-ToggleSwitch-SwitchButton-1CtM6","SwitchButtonContent":"prc-ToggleSwitch-SwitchButtonContent-u57jo","IconContainer":"prc-ToggleSwitch-IconContainer-mUpUm","LineIconContainer":"prc-ToggleSwitch-LineIconContainer-cn8pC","CircleIconContainer":"prc-ToggleSwitch-CircleIconContainer-XiMW5","ToggleKnob":"prc-ToggleSwitch-ToggleKnob-N9ops"};
 

package/dist/hooks/useFocusZone.d.ts

@@ -18,6 +18,10 @@ export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDe
      * any time.
      */
     disabled?: boolean;
+    /**
+     * Set to true to allow focus to move to elements that are dynamically prepended to the container.
+     */
+    focusPrependedElements?: boolean;
 }
 export declare function useFocusZone(settings?: FocusZoneHookSettings, dependencies?: React.DependencyList): {
     containerRef: React.RefObject<HTMLElement | null>;

package/dist/hooks/useFocusZone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusZone.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusZone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAEhD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,yBAAyB,CAAC;IAC/F;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAElD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,YAAY,CAC1B,QAAQ,GAAE,qBAA0B,EACpC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAChE,CAoCA"}
+{"version":3,"file":"useFocusZone.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusZone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAEhD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,yBAAyB,CAAC;IAC/F;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAElD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,GAAE,qBAA0B,EACpC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAChE,CAoCA"}

package/dist/internal/utils/hasInteractiveNodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hasInteractiveNodes.d.ts","sourceRoot":"","sources":["../../../src/internal/utils/hasInteractiveNodes.ts"],"names":[],"mappings":"AAwBA;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,WAUxF"}
+{"version":3,"file":"hasInteractiveNodes.d.ts","sourceRoot":"","sources":["../../../src/internal/utils/hasInteractiveNodes.ts"],"names":[],"mappings":"AA2BA;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,WAkBxF"}

package/dist/internal/utils/hasInteractiveNodes.js

@@ -7,6 +7,9 @@ const nonValidSelectors = {
 const interactiveElementsSelectors = [`a[href]`, `button`, 'summary', 'select', 'input:not([type=hidden])', 'textarea', '[tabindex="0"]', `audio[controls]`, `video[controls]`, `[contenteditable]`];
 const interactiveElements = interactiveElementsSelectors.map(selector => `${selector}:not(${Object.values(nonValidSelectors).join('):not(')})`);
 
+// Combined selector for fast querySelector check
+const interactiveSelector = interactiveElements.join(', ');
+
 /**
  * Finds interactive nodes within the passed node.
  * If the node itself is interactive, or children within are, it will return true.
@@ -23,26 +26,29 @@ function hasInteractiveNodes(node, ignoreNodes) {
   // If one does exist, we can abort early.
 
   const nodesToIgnore = [node];
-  const interactiveNodes = findInteractiveChildNodes(node, nodesToIgnore);
-  return Boolean(interactiveNodes);
+
+  // Performance optimization: Use querySelectorAll with combined selector first
+  // This avoids recursive getComputedStyle calls for each node
+  const candidates = node.querySelectorAll(interactiveSelector);
+  for (const candidate of candidates) {
+    if (!nodesToIgnore.includes(candidate) && !isNonValidInteractiveNode(candidate)) {
+      return true;
+    }
+  }
+  return false;
 }
+
+// Note: Only call getComputedStyle when CSS-based checks are insufficient
 function isNonValidInteractiveNode(node) {
-  const nodeStyle = getComputedStyle(node);
+  // Fast path: Check attribute-based states first (no style recalc needed)
   const isNonInteractive = node.matches('[disabled], [hidden], [inert]');
+  if (isNonInteractive) return true;
+
+  // Only call getComputedStyle if attribute checks passed
+  // This is necessary for display:none and visibility:hidden which aren't detectable via attributes
+  const nodeStyle = getComputedStyle(node);
   const isHiddenVisually = nodeStyle.display === 'none' || nodeStyle.visibility === 'hidden';
-  return isNonInteractive || isHiddenVisually;
-}
-function findInteractiveChildNodes(node, ignoreNodes) {
-  if (!node) return;
-  const ignoreSelector = ignoreNodes.find(elem => elem === node);
-  const isNotValidNode = isNonValidInteractiveNode(node);
-  if (node.matches(interactiveElements.join(', ')) && !ignoreSelector && !isNotValidNode) {
-    return node;
-  }
-  for (const child of node.children) {
-    const interactiveNode = findInteractiveChildNodes(child, ignoreNodes);
-    if (interactiveNode) return true;
-  }
+  return isHiddenVisually;
 }
 
 export { hasInteractiveNodes };

package/dist/utils/__tests__/character-counter.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=character-counter.test.d.ts.map

package/dist/utils/__tests__/character-counter.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"character-counter.test.d.ts","sourceRoot":"","sources":["../../../src/utils/__tests__/character-counter.test.ts"],"names":[],"mappings":""}

package/dist/utils/character-counter.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export interface CharacterCounterCallbacks {
+    onCountUpdate: (count: number, isOverLimit: boolean, message: string) => void;
+    onScreenReaderAnnounce: (message: string) => void;
+}
+export declare class CharacterCounter {
+    private announceTimeout;
+    private callbacks;
+    private isInitialLoad;
+    constructor(callbacks: CharacterCounterCallbacks);
+    /**
+     * Update the character count based on current input value
+     */
+    updateCharacterCount(currentLength: number, maxLength: number): void;
+    /**
+     * Announce character count to screen readers with debouncing
+     */
+    private announceToScreenReader;
+    /**
+     * Clean up any pending timeouts
+     */
+    cleanup(): void;
+}
+//# sourceMappingURL=character-counter.d.ts.map

package/dist/utils/character-counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"character-counter.d.ts","sourceRoot":"","sources":["../../src/utils/character-counter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7E,sBAAsB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,aAAa,CAAgB;gBAEzB,SAAS,EAAE,yBAAyB;IAIhD;;OAEG;IACH,oBAAoB,CAAC,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;IAyBpE;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAc9B;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB"}

package/dist/utils/character-counter.js

@@ -0,0 +1,65 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+
+const SCREEN_READER_DELAY = 500;
+class CharacterCounter {
+  announceTimeout = null;
+  isInitialLoad = true;
+  constructor(callbacks) {
+    this.callbacks = callbacks;
+  }
+
+  /**
+   * Update the character count based on current input value
+   */
+  updateCharacterCount(currentLength, maxLength) {
+    const charactersRemaining = maxLength - currentLength;
+    let message = '';
+    if (charactersRemaining >= 0) {
+      const characterText = charactersRemaining === 1 ? 'character' : 'characters';
+      message = `${charactersRemaining} ${characterText} remaining`;
+      this.callbacks.onCountUpdate(charactersRemaining, false, message);
+    } else {
+      const charactersOver = -charactersRemaining;
+      const characterText = charactersOver === 1 ? 'character' : 'characters';
+      message = `${charactersOver} ${characterText} over`;
+      this.callbacks.onCountUpdate(charactersOver, true, message);
+    }
+    if (!this.isInitialLoad) {
+      this.announceToScreenReader(message);
+    }
+
+    // After first update, set isInitialLoad to false
+    if (this.isInitialLoad) {
+      this.isInitialLoad = false;
+    }
+  }
+
+  /**
+   * Announce character count to screen readers with debouncing
+   */
+  announceToScreenReader(message) {
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout);
+    }
+    if (typeof window === 'undefined' || typeof window.setTimeout !== 'function') {
+      return;
+    }
+    this.announceTimeout = window.setTimeout(() => {
+      this.callbacks.onScreenReaderAnnounce(message);
+    }, SCREEN_READER_DELAY);
+  }
+
+  /**
+   * Clean up any pending timeouts
+   */
+  cleanup() {
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout);
+    }
+  }
+}
+
+export { CharacterCounter };

package/generated/components.json

@@ -138,6 +138,12 @@
               "type": "Component | 'none'",
               "required": false,
               "description": "Icon displayed when the menu item is within the overflow menu. If 'none' is provided, no icon will be shown in the overflow menu."
+            },
+            {
+              "name": "returnFocusRef",
+              "type": "React.RefObject<HTMLElement>",
+              "required": false,
+              "description": "A ref to an element that should receive focus when the menu is closed."
             }
           ]
         }
@@ -7162,6 +7168,11 @@
           "defaultValue": "false",
           "description": "Creates a full-width input element"
         },
+        {
+          "name": "characterLimit",
+          "type": "number",
+          "description": "The maximum number of characters allowed in the input"
+        },
         {
           "name": "contrast",
           "type": "boolean",
@@ -7501,6 +7512,11 @@
           "defaultValue": "'both'",
           "description": "Changes the resize behavior"
         },
+        {
+          "name": "characterLimit",
+          "type": "number",
+          "description": "The maximum number of characters allowed in the textarea"
+        },
         {
           "name": "contrast",
           "type": "boolean",