@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/InputParts/index.cjs

@@ -31,14 +31,17 @@ __export(InputParts_exports, {
   InputIconFrame: () => InputIconFrame,
   InputInfo: () => InputInfo,
   InputLabel: () => InputLabel,
+  boxRingMode: () => boxRingMode,
+  boxRingOffset: () => boxRingOffset,
   defaultInputGroupStyles: () => defaultInputGroupStyles,
+  ensureInputPartsFocusRing: () => ensureInputPartsFocusRing,
   getInputFrameTransitionProps: () => getInputFrameTransitionProps,
+  inputPartsRingCss: () => inputPartsRingCss,
   inputSizeVariant: () => inputSizeVariant,
   useForwardFocus: () => useForwardFocus
 });
 module.exports = __toCommonJS(InputParts_exports);
 var import_get_font_sized = require("@tamagui/get-font-sized");
-var import_get_token = require("@tamagui/get-token");
 var import_react = require("react");
 var import_react_native = require("react-native-web");
 var import_tamagui = require("tamagui");
@@ -63,10 +66,60 @@ function useNativeFieldA11yProps() {
 }
 const defaultContextValues = {
   size: "$true",
-  scaleIcon: 1.2,
+  scaleIcon: 1,
   color: void 0
 };
 const InputContext = (0, import_tamagui.createStyledContext)(defaultContextValues);
+function endCapVariantsFromHeights(heightVariants) {
+  return Object.fromEntries(Object.entries(heightVariants).map(([token, {
+    height
+  }]) => [token, {
+    height,
+    width: height,
+    paddingHorizontal: 0
+  }]));
+}
+const sizeRecipeEndCapVariants = endCapVariantsFromHeights(import_theme.recipeFamilies.control.heightVariants);
+function sizeRecipeBoxFallback(val) {
+  const recipe = (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  return {
+    height: recipe.height,
+    paddingHorizontal: recipe.paddingHorizontal,
+    gap: recipe.gap
+  };
+}
+function sizeRecipeTypeFallback(val) {
+  return {
+    fontSize: (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
+      touch: (0, import_theme.isTouchSurface)()
+    }).fontSize
+  };
+}
+function sizeRecipeIconFallback(val) {
+  const {
+    iconSize
+  } = (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  return {
+    width: iconSize,
+    height: iconSize
+  };
+}
+function sizeRecipeEndCapFallback(val) {
+  const {
+    height
+  } = (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  return {
+    height,
+    width: height,
+    paddingHorizontal: 0
+  };
+}
 const FocusContext = (0, import_tamagui.createStyledContext)({
   setFocused: _val => {},
   focused: false
@@ -115,8 +168,80 @@ const inputOutlineRest = {
 const inputOutlineFocus = {
   outlineColor: "$outlineColor",
   outlineWidth: 2,
-  outlineStyle: "solid"
+  outlineStyle: "solid",
+  // Inset: Input.Box clips children with overflow:hidden; an outer +2px
+  // ring is severed (LC-71 clipping carve-out).
+  outlineOffset: -2
+};
+const AREA_NO_OUTLINE = {
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent"
 };
+function boxRingMode(overflow, paintsRing) {
+  if (!paintsRing) return void 0;
+  return overflow === "hidden" ? "inset" : "outset";
+}
+function boxRingOffset(mode) {
+  return mode === "outset" ? 2 : -2;
+}
+const inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never outlines.
+   Inset iff the Box clips (overflow:hidden). Do not :has(:focus-visible) on
+   every descendant \u2014 SearchInput clear \u2715 is a second focusable. */
+[data-mp-input-box][data-mp-ring="inset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="inset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: -2px !important;
+}
+[data-mp-input-box][data-mp-ring="outset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="outset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: 2px !important;
+}
+[data-mp-input-area],
+[data-mp-input-area]:focus,
+[data-mp-input-area]:focus-visible,
+[data-mp-input-box] input,
+[data-mp-input-box] textarea,
+[data-mp-input-box] [contenteditable] {
+  outline: none !important;
+  box-shadow: none !important;
+}`;
+const INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
+function ensureInputPartsFocusRing() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(INPUT_PARTS_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = INPUT_PARTS_RING_STYLE_ID;
+  tag.textContent = inputPartsRingCss;
+  document.head.appendChild(tag);
+}
+function webBoxRingAttrs(overflow, paintsRing, extraClass) {
+  if (!import_tamagui.isWeb) return void 0;
+  const mode = boxRingMode(overflow, paintsRing);
+  const className = [paintsRing ? "mp-composite-ring" : void 0, extraClass].filter(Boolean).join(" ");
+  return {
+    ...(className ? {
+      className
+    } : void 0),
+    "data-mp-input-box": "true",
+    ...(mode ? {
+      "data-mp-ring": mode
+    } : void 0)
+  };
+}
+function webAreaAttrs(extraClass) {
+  if (!import_tamagui.isWeb) return void 0;
+  const className = ["mp-input-area", extraClass].filter(Boolean).join(" ");
+  return {
+    className,
+    "data-mp-input-area": "true"
+  };
+}
 const defaultInputGroupStyles = {
   size: "$true",
   fontFamily: "$body",
@@ -134,9 +259,11 @@ const defaultInputGroupStyles = {
   hoverStyle: {
     borderColor: import_colorRamps.formInputColors.border.hover
   },
+  // LC-71: any-focus only shifts the border. The ring lives on
+  // `focusVisibleStyle` and on `[data-mp-ring]:has(input:focus)` so
+  // button-like Boxes (Select, pagination) do not ring on mouse click.
   focusStyle: {
-    borderColor: import_colorRamps.formInputColors.border.focus,
-    ...inputOutlineFocus
+    borderColor: import_colorRamps.formInputColors.border.focus
   },
   focusVisibleStyle: {
     borderColor: import_colorRamps.formInputColors.border.focus,
@@ -148,6 +275,11 @@ const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
   alignItems: "center",
   context: InputContext,
   overflow: "hidden",
+  // LC-71: className on XGroup is best-effort (often dropped). The styleable
+  // spread stamps data-mp-input-box / data-mp-ring; CSS keys off those.
+  ...(import_tamagui.isWeb ? {
+    className: "mp-composite-ring"
+  } : {}),
   variants: {
     unstyled: {
       false: defaultInputGroupStyles
@@ -156,14 +288,8 @@ const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
       ":number": {}
     },
     size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          height: val,
-          borderRadius: tokens.radius[val]
-        };
-      }
+      ...(import_theme.recipeFamilies.control.boxVariants ?? import_theme.sizeRecipeBoxVariants),
+      "...size": sizeRecipeBoxFallback
     }
   },
   defaultVariants: {
@@ -240,6 +366,11 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
     children,
     onPress,
     disabled,
+    suppressFocusRing,
+    recipeFamily = "control",
+    sizeRecipeEscape,
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
     ...props
   } = groupProps;
   const [focused, setFocused] = (0, import_react.useState)(false);
@@ -256,6 +387,14 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   } : {
     disabled
   };
+  const paintsRing = !grouped && !inTableCell;
+  const boxOverflow = paintsRing ? "hidden" : "visible";
+  const ringMode = boxRingMode(boxOverflow, paintsRing);
+  if (import_tamagui.isWeb) {
+    (0, import_theme.ensureCompositeFocusRing)();
+    ensureInputPartsFocusRing();
+  }
+  const boxRingAttrs = webBoxRingAttrs(boxOverflow, paintsRing, props.className);
   (0, import_theme.warnPositiveTabIndex)({
     value: props.tabIndex,
     component: "Input.Box"
@@ -263,6 +402,40 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   (0, import_theme.warnOutlineNone)(props.focusVisibleStyle, {
     component: "Input.Box"
   });
+  (0, import_theme.warnSizeRecipeEscape)({
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
+    sizeRecipeEscape,
+    component: "Input.Box",
+    id: typeof props.id === "string" ? props.id : void 0
+  });
+  const sizeToken = String(props.size ?? knobProps.sizeToken);
+  const familyRecipe = (0, import_theme.sizeRecipeForToken)(sizeToken, {
+    touch: (0, import_theme.isTouchSurface)(),
+    family: recipeFamily
+  });
+  const controlFragment = recipeFamily === "control" ? knobProps.control : {
+    height: familyRecipe.height,
+    paddingHorizontal: familyRecipe.paddingHorizontal,
+    gap: familyRecipe.gap
+  };
+  const sizeRecipeEscaped = typeof sizeRecipeEscape === "string" && sizeRecipeEscape.trim().length > 0;
+  const sizeRecipeEscapeOverride = sizeRecipeEscaped ? {
+    ...(typeof heightProp === "number" ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp === "number" ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  } : void 0;
+  const passthroughSizeProps = {
+    ...(typeof heightProp !== "number" && heightProp != null ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  };
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
@@ -279,8 +452,11 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         minWidth: 0,
         elevation: void 0,
         ...props,
+        ...passthroughSizeProps,
+        ...sizeRecipeEscapeOverride,
         ...framePressProps,
-        overflow: "visible",
+        ...boxRingAttrs,
+        overflow: boxOverflow,
         children
       }))
     });
@@ -294,11 +470,24 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       flex: 1,
       elevation: void 0,
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      overflow: "visible",
+      ...boxRingAttrs,
+      overflow: boxOverflow,
       children
     }));
   }
+  const suppressedRingProps = suppressFocusRing ? {
+    focusStyle: {
+      borderColor: import_colorRamps.formInputColors.border.focus,
+      ...inputOutlineRest
+    },
+    focusVisibleStyle: {
+      borderColor: import_colorRamps.formInputColors.border.focus,
+      ...inputOutlineRest
+    }
+  } : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
     focused,
     setFocused,
@@ -306,6 +495,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       ref: forwardedRef,
       ...knobProps.body,
       size: knobProps.sizeToken,
+      ...controlFragment,
       backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.base,
       ...getBoxElevationProps(knobProps.elevation),
       ...knobProps.borderRadius,
@@ -319,24 +509,31 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       },
       focusStyle: {
         borderColor: import_colorRamps.formInputColors.border.focus,
-        ...inputOutlineFocus,
         ...control.focusKnobProps
       },
       focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
         borderColor: import_colorRamps.formInputColors.border.focus,
         ...inputOutlineFocus,
-        ...control.focusVisibleKnobProps
+        ...control.focusVisibleKnobProps,
+        outlineOffset: boxRingOffset(ringMode)
       }),
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      ...(focused ? {
-        // Focus is forwarded from the inner input, so the ring is applied
-        // as inline props rather than focusStyle.
+      ...boxRingAttrs,
+      ...(focused && !suppressFocusRing ? {
+        // Text-entry carve-out (LC-71): inner Area focus means typing
+        // is next, so the Box rings on any focus — including click.
+        // CSS `[data-mp-ring]` is the sync path; this is the token-
+        // resolved backup (and the native path). Button-like Boxes
+        // (Select) do not set `focused` (no Area onFocus).
         borderColor: import_colorRamps.formInputColors.border.focus,
         ...(0, import_theme.ensureFocusVisibleRing)({
           ...inputOutlineFocus,
           ...control.focusKnobProps,
-          ...control.focusVisibleKnobProps
+          ...control.focusVisibleKnobProps,
+          outlineOffset: boxRingOffset(ringMode)
         })
       } : {
         // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
@@ -344,42 +541,53 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         // Keep outline-transparent rest (border-flicker fix); do not warn.
         ...inputOutlineRest
       }),
+      ...suppressedRingProps,
       ...(disabled ? {
         ...disabledState.surfaceKnobProps,
         hoverStyle: {
           ...disabledState.surfaceKnobProps
         }
       } : void 0),
-      overflow: "hidden",
+      overflow: boxOverflow,
       children
     }))
   });
 });
-const inputSizeVariant = (val = "$true", extras) => {
-  const size = val || "$true";
-  const paddingHorizontal = (0, import_get_token.getSpace)(size, {
-    shift: -1,
-    bounds: [2]
+const inputSizeVariant = (val = "$true") => {
+  const recipe = (0, import_theme.sizeRecipeForToken)(String(val || "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
   });
-  const fontStyle = (0, import_get_font_sized.getFontSized)(size, extras);
-  const {
-    lineHeight: _lh,
-    ...safeFontStyle
-  } = !import_tamagui.isWeb && fontStyle ? fontStyle : {
-    lineHeight: void 0,
-    ...fontStyle
-  };
   return {
-    ...safeFontStyle,
-    paddingHorizontal
+    fontSize: recipe.fontSize,
+    paddingHorizontal: recipe.paddingHorizontal
   };
 };
 const InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
   unstyled: true,
   context: InputContext,
+  // LC-71: the Area never paints a ring. Chrome's UA :focus-visible outline
+  // on <input> is the "ring cuts the control in half" defect (magnifier sits
+  // outside). Kill it at rest and on focus; the Box owns the ring.
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent",
+  ...(import_tamagui.isWeb ? {
+    className: "mp-input-area"
+  } : {}),
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
   variants: {
     size: {
-      "...size": inputSizeVariant
+      ...(import_theme.recipeFamilies.control.typeVariants ?? import_theme.sizeRecipeTypeVariants),
+      "...size": sizeRecipeTypeFallback
     },
     scaleIcon: {
       ":number": {}
@@ -401,6 +609,9 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
     onChange: onChangeProp,
     onFocus: onFocusProp,
     onBlur: onBlurProp,
+    focusStyle: focusStyleProp,
+    focusVisibleStyle: focusVisibleStyleProp,
+    className: classNameProp,
     ...props
   } = areaProps;
   const {
@@ -410,6 +621,7 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
   const fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const nativeA11yProps = useNativeFieldA11yProps();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  if (import_tamagui.isWeb) ensureInputPartsFocusRing();
   return (
     // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
     // input must be allowed to shrink below the <input>'s intrinsic width
@@ -427,6 +639,7 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
         ...nativeA11yProps,
         ref,
         size,
+        ...knobProps.controlType,
         color: knobProps.textAccentColor,
         placeholderTextColor: theme.placeholderColor?.val ?? "$placeholderColor",
         ...(inTableCell ? {
@@ -438,6 +651,16 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
         inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
         autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
         ...props,
+        ...webAreaAttrs(classNameProp),
+        ...AREA_NO_OUTLINE,
+        focusStyle: {
+          ...focusStyleProp,
+          ...AREA_NO_OUTLINE
+        },
+        focusVisibleStyle: {
+          ...focusVisibleStyleProp,
+          ...AREA_NO_OUTLINE
+        },
         onFocus: e => {
           setFocused(true);
           onFocusProp?.(e);
@@ -483,13 +706,8 @@ const InputButton = (0, import_tamagui.styled)(import_tamagui.Button, {
       ":number": {}
     },
     size: {
-      "...size": (val = "$true") => {
-        return {
-          paddingHorizontal: 0,
-          height: val,
-          width: val
-        };
-      }
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback
     }
   }
 });
@@ -497,9 +715,16 @@ const InputButtonImpl = InputButton.styleable((props, ref) => {
   const {
     size
   } = InputContext.useStyledContext();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const square = knobProps.control.height;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButton, {
     ref,
     size,
+    height: square,
+    width: square,
+    paddingHorizontal: 0,
     tabIndex: -1,
     ...props
   });
@@ -514,8 +739,8 @@ const InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
       ":number": {}
     },
     size: {
-      // Don't apply padding here - let adornment variant handle it for proper leading/trailing spacing
-      "...size": () => ({})
+      ...(import_theme.recipeFamilies.control.iconVariants ?? import_theme.sizeRecipeIconVariants),
+      "...size": sizeRecipeIconFallback
     },
     adornment: {
       leading: {},
@@ -523,15 +748,11 @@ const InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
     }
   }
 });
-const getIconSize = (size, scale) => {
-  return (typeof size === "number" ? size * 0.5 : (0, import_tamagui.getFontSize)(size)) * scale;
-};
 const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
   const {
     children,
     color: colorProp,
     scaleIcon: scaleIconProp,
-    adornment,
     ...props
   } = iconProps;
   const {
@@ -539,31 +760,24 @@ const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
     color: contextColor,
     scaleIcon = 1
   } = InputContext.useStyledContext();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
   const resolvedScaleIcon = scaleIconProp ?? scaleIcon;
   const theme = (0, import_tamagui.useTheme)();
   const rawColor = colorProp ?? contextColor;
   const color = (0, import_tamagui.getVariable)(rawColor ? theme[rawColor]?.get("web") ?? rawColor : theme.borderColor?.get("web"));
-  const iconSize = getIconSize(size, resolvedScaleIcon);
-  const padding = (0, import_get_token.getSpace)(size, {
-    shift: 0,
-    bounds: [2]
-  });
-  const paddingProps = adornment === "leading" ? {
-    paddingInlineStart: padding,
-    paddingInlineEnd: 0
-  } : adornment === "trailing" ? {
-    paddingInlineEnd: padding,
-    paddingInlineStart: 0
-  } : {
-    paddingHorizontal: padding
-  };
+  const iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
   const getThemedIcon = (0, import_tamagui.useGetThemedIcon)({
     size: iconSize,
     color
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIconFrame, {
     ref,
-    ...paddingProps,
+    size,
+    ...knobProps.controlIcon,
+    width: iconSize,
+    height: iconSize,
     ...props,
     children: getThemedIcon(children)
   });
@@ -697,14 +911,7 @@ const InputXGroup = (0, import_tamagui.styled)(import_tamagui.XGroup, {
       ":number": {}
     },
     size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        const radiusToken = tokens.radius[val] ?? tokens.radius.$true;
-        return {
-          borderRadius: radiusToken
-        };
-      }
+      "...size": () => ({})
     }
   }
 });
@@ -716,17 +923,39 @@ function FocusWiredTextArea(props) {
     innerRef,
     onFocus,
     onBlur,
+    className,
+    focusStyle,
+    focusVisibleStyle,
+    "aria-describedby": describedByProp,
     ...rest
   } = props;
   const fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const nativeA11yProps = useNativeFieldA11yProps();
+  const describedBy = [fieldDescribedBy, describedByProp].filter(Boolean).join(" ") || void 0;
+  if (import_tamagui.isWeb) ensureInputPartsFocusRing();
+  const killInnerRing = {
+    ...webAreaAttrs(className),
+    ...AREA_NO_OUTLINE,
+    focusStyle: {
+      ...focusStyle,
+      ...AREA_NO_OUTLINE
+    },
+    focusVisibleStyle: {
+      ...focusVisibleStyle,
+      ...AREA_NO_OUTLINE
+    }
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flex: 1,
+    minWidth: 0,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_themedPrimitives.ThemedTextArea, {
-      "aria-describedby": fieldDescribedBy,
+      "aria-describedby": describedBy,
+      "aria-multiline": "true",
       ...nativeA11yProps,
       ref: innerRef,
       width: "100%",
+      ...rest,
+      ...killInnerRing,
       onFocus: e => {
         setFocused(true);
         onFocus?.(e);
@@ -734,8 +963,7 @@ function FocusWiredTextArea(props) {
       onBlur: e => {
         setFocused(false);
         onBlur?.(e);
-      },
-      ...rest
+      }
     })
   });
 }